<template>
    <el-container>
        <el-main>
            <!-- 搜索框 -->
            <el-row :gutter="20" type="flex" justify="spac-between" align="middle">
                <el-col :span="6">
                    <el-input v-model="input" placeholder="请输入档案号/姓名"></el-input>
                </el-col>
                <el-col :span="2" class="butWord">
                    <el-button type="primary" @click="searchBtn">查询</el-button>
                </el-col>
                <el-col class="butWord">
                    <el-button type="primary" @click="addDialog = true">新增</el-button>
                </el-col>
            </el-row>
            <!-- 页面表格 -->
            <el-table :data="tableData" stripe style="width: 100%"
                :header-cell-style="{ 'background-color': ' rgb(39, 49,70)' }" class="table">

                <el-table-column prop="number" label="档案号" width="120" align="center"></el-table-column>
                <el-table-column prop="name" label="姓名" align="center"></el-table-column>
                <el-table-column prop="" label="心理评测日期" width="120" align="center">
                    {{ tableData.date | dateFormat("YYYY-MM-DD") }}
                </el-table-column>
                <el-table-column prop="qutihua" label="躯体化" align="center">
                </el-table-column>
                <el-table-column prop="qiangpozhenhua" label="强迫症化" align="center"></el-table-column>
                <el-table-column prop="renjiguanximingan" label="人际关系敏感" align="center"></el-table-column>
                <el-table-column prop="youyu" label="犹豫" align="center">
                </el-table-column>
                <el-table-column prop="jiaolu" label="焦虑" align="center">
                </el-table-column>
                <el-table-column prop="didui" label="敌对" align="center">
                </el-table-column>
                <el-table-column prop="kongbu" label="恐怖" align="center">
                </el-table-column>
                <el-table-column prop="pianzhi" label="偏执" align="center"></el-table-column>
                <el-table-column prop="jingshenbingxing" label="精神病性" align="center"></el-table-column>
                <el-table-column label="操作" align="center" width="150">
                    <template slot-scope="scope">
                        <el-button @click="write(scope.row, scope.$index)" type="primary" size="small">编辑
                        </el-button>
                        <el-button @click="delSicker(scope.row.id)" type="danger" size="small">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 模态框 -->
            <!-- 新增模态框 -->
            <el-dialog title="新增" :visible.sync="addDialog" width="70%">
                <el-form :inline="true" :model="addData" class="addform">
                    <el-form-item label="档案号">
                        <el-input v-model="addData.memberId" placeholder="档案号" label-width="80px"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="addData.name" placeholder="姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="评估日期">
                        <el-date-picker v-model="addData.date" align="right" type="date" placeholder="选择日期"
                            format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
                <!-- 答题页面 -->
                <el-tabs>
                    <el-tab-pane label="心理评测">
                        <el-table :data="answerData">
                            <el-table-column type="index" width="40"></el-table-column>
                            <el-table-column prop="question" label="请根据近一年的感觉，回答以下问题" width="300" align="center">
                            </el-table-column>
                            <el-table-column align="center">
                                <template slot-scope="scope">
                                    <el-radio-group v-model="scope.row.radio" @change="conutNumber(scope.row)">
                                        <el-radio label="从无"></el-radio>
                                        <el-radio label="轻度"></el-radio>
                                        <el-radio label="中度"></el-radio>
                                        <el-radio label="偏重"></el-radio>
                                        <el-radio label="严重"></el-radio>
                                    </el-radio-group>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
                <el-row class="btn">
                    <el-col :push="10">
                        <el-button type="primary" addDialog="false" @click="submitForm">提交</el-button>
                        <el-button @click="cancelInput" addDialog="false">取 消</el-button>
                    </el-col>
                </el-row>
            </el-dialog>
            <!-- 编辑模态框 -->
            <el-dialog title="编辑" :visible.sync="writeDialog" width="70%">
                <el-form :inline="true" :model="writeData" label-width="80px">
                    <el-form-item label="档案号">
                        <el-input v-model="writeData.number" placeholder="档案号"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="writeData.name" placeholder="姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="评估日期">
                        <el-date-picker v-model="writeData.date" align="right" placeholder="选择日期"
                            format="yyyy 年 MM 月 dd 日" value-format="timestamp">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
                <el-tabs>
                    <el-tab-pane label="心理评测">
                        <el-table :data="answerData">
                            <el-table-column type="index" width="40"></el-table-column>
                            <el-table-column prop="question" label="请根据近一年的感觉，回答以下问题" width="300" align="center">
                            </el-table-column>
                            <el-table-column align="center">
                                <template slot-scope="scope">
                                    <el-radio-group v-model="scope.row.radio" disabled>
                                        <el-radio :label="1">从无</el-radio>
                                        <el-radio :label="2">轻度</el-radio>
                                        <el-radio :label="3">中度</el-radio>
                                        <el-radio :label="4">偏重</el-radio>
                                        <el-radio :label="5">严重</el-radio>
                                    </el-radio-group>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
                <el-row class="btn">
                    <el-col :push="10">
                        <el-button @click="writeDialog = false">取 消</el-button>
                        <el-button type="primary" @click="confirmWrite">确 定</el-button>
                    </el-col>
                </el-row>
            </el-dialog>
            <!-- 分页 -->
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page" :page-sizes="[5, 10, 50, 100]" :page-size="limit"
                    layout="total, sizes, prev, pager, next, jumper" :total="Number(count)">
                </el-pagination>
            </div>
        </el-main>
    </el-container>

</template>

<script>
export default {
    data() {
        return {
            radio: "1",
            input: '',
            //模态框显示
            addDialog: false,
            writeDialog: false,
            //搜索数据
            findData: {},
            limit: 5,
            page: 1,
            count: 0,
            //页面表格数据
            tableData: [],

            /* 模态框 */

            // 新增模态框数据
            addData: {},
            // 新增模态框页面内容

            // 编辑模态框数据
            writeData: {},
            scoreall: 0,
            allSocre: [],//总分
            answerData: [
                { question: '头痛', num: 0 },
                { question: '神经过敏，心中不踏实', num: 0 },
                { question: '头脑中有不必要的想法', num: 0 },
                { question: '头晕和昏倒', num: 0 },
                { question: '对异性兴趣减退', num: 0 },
                { question: '对旁人责备求全', num: 0 },
                { question: '感到别人能控制你的想法', num: 0 },
                { question: '责怪别人制造麻烦', num: 0 },
                { question: '忘记性大', num: 0 },
                { question: '担心自己的服饰整齐及仪态端正', num: 0 },
                { question: '容易烦躁和激动', num: 0 },
                { question: '胸痛', num: 0 },
                { question: '害怕空旷的场所或街道', num: 0 },
                { question: '感到自己的精力下降，活动减慢', num: 0 },
                { question: '想结束自己的生命', num: 0 },
                { question: '听到旁人听不到的声音', num: 0 },
                { question: '发抖', num: 0 },
                { question: '感到大多数人不可信任', num: 0 },
                { question: '胃口不好', num: 0 },],

        };
    },

    methods: {
        //搜索档案号/姓名
        searchAll(findData) {
            if (Number(this.input)) {
                this.$axios({
                    url: "/psychologicalTests/list",
                    method: "post",
                    data: {
                        number: this.input.trim(),
                        page: this.page,
                        limit: this.limit,
                    },
                }).then((res) => {
                    // //console.log(res);
                    // //console.log(res.data);
                    this.tableData = res.data;
                    this.count = res.count;
                }).catch((err) => {
                    //console.log(res);
                    //console.log(err);
                });
            } else {
                this.$axios({
                    url: "/psychologicalTests/list",
                    method: "post",
                    data: {
                        name: this.input.trim(),
                        page: this.page,
                        limit: this.limit,
                    },
                }).then((res) => {
                    //console.log(res);
                    // //console.log(res.data);
                    this.tableData = res.data;
                    this.count = res.count;
                    this.input = '';
                }).catch((err) => {
                    //console.log(res);
                    //console.log(err);
                });
            }
        },
        searchenter(val) {
            this.page = 1;
            this.input = val;
            this.searchAll();
        },
        searchBtn() {
            this.page = 1;
            this.searchAll();
        },

        //新增模态框
        conutNumber(item) {
            //console.log(item);
            switch (item.radio) {
                case '从无）':
                    item.num = 0;
                    break;
                case '轻度':
                    item.num = 1;
                    break;
                case '中度':
                    item.num = 2;
                    break;
                case '偏重':
                    item.num = 3;
                    break;
                case '严重':
                    item.num = 4;
                    break;
                default:
                    "答案输入有误";
                    break;
            }
        },
        //新增模态框提交按钮
        submitForm(val) {
            for (let i = 0; i < this.answerData.length; i++) {
                this.scoreall += this.answerData.num

                //console.log(this.answerData.num);
                if (this.answerData.num == 0) {
                    this.$message({
                        type: "success",
                        message: "你有题目没答完哟!",
                    });
                    return;
                } else {
                    if (i == this.answerData.length - 1) {
                        // //console.log(this.scoreall);
                        this.allSocre.push(this.scoreall)
                        this.scoreall = 0
                    }
                }

            }

            // //console.log(this.allSocre);

            this.allSocre[0] >= 45 ? this.allSocre[0] = '是' : this.allSocre[0] = '否'
            this.$axios({
                method: 'post',
                url: '/psychologicalTests/add',
                data: {
                     "date": this.addData.date,
                     "memberId": this.addData.memberId,
                    "didui":  this.allSocre[0],
                    "jiaolu":  this.allSocre[0],
                    "jingshenbingxing":  this.allSocre[0],
                    "kongbu":  this.allSocre[0],
                    "pianzhi":  this.allSocre[0],
                    "qiangpozhenhua":  this.allSocre[0],
                    "qutihua":  this.allSocre[0],
                    "renjiguanximingan": this.allSocre[0],
                    "youyu":  this.allSocre[0]
                }
            }).then(res => {
                //console.log(res);
                this.getList()
                this.addDialog = false;
            }).catch(err => {
                //console.log(err);
            })
        },
        //新增模态框下取消按钮
        cancelInput() {
            this.addDialog = false;
        },

        //编辑信息
        write(item, index) {
            // this.tableIndex = index,
            //console.log(item);
            this.writeData = {
                number: item.number,
                name: item.name,
                date: item.date,
            }
            this.writeDialog = true;
        },
        //编辑模态框确定按钮
        confirmWrite() {
            this.$axios({
                method: 'post',
                url: '/psychologicalTests/update',
                data: {
                    memberId: this.writeData.number,
                    name: this.writeData.name,
                    date: this.writeData.date,
                }
            }).then(res => {
                //console.log(res);
                this.getList()
                this.writeDialog = false;
            }).catch(err => {
                //console.log(err);
            })

        },

        //删除信息
        delSicker(id) {
            //console.log(id);
            this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //console.log(id);
                //console.log(this.tableData);
                this.$axios({
                    url: "/psychologicalTests/delete",
                    method: "get",
                    params: { id: id },
                })
                    .then((res) => {
                        //console.log(res);
                        this.getList();
                    })
                    .catch((err) => {
                        //console.log(err);
                    });
                this.$message({
                    type: "success",
                    message: "删除成功!",
                });
            })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },

        //分页
        handleSizeChange(val) {
            this.limit = Number(val)
            this.getList()
        },
        handleCurrentChange(val) {
            this.page = Number(val)
            this.getList()
        },
        getList() {
            //console.log(typeof (this.limit));
            this.$axios({
                method: 'post',
                url: '/psychologicalTests/findAll',
                data: {
                    limit: this.limit,
                    page: this.page
                },
            }).then(res => {
                // //console.log(res);
                this.tableData = res.data;
                this.count = res.count;
            }).catch(err => {
                //console.log(err);
            })
        }

    },
    created() {
        this.getList()
    }
}

</script>

<style scoped>
.table {
    margin-top: 30px;
}

.block {
    margin-top: 30px;
    float: right;
}

el-input {
    width: 50%;
}

.btn {
    margin-top: 20px;
}
.addform{
<<<<<<< HEAD
  width: 70%;
=======
  width: 100%;
>>>>>>> 44776626cdfca83a0c353cea03fbdd8ca1670b88
 }
</style>